<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.Title}} - Simple CRM</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
     <!-- Heroicons CSS -->
     <style>
         /* Heroicons SVG图标样式 */
         .icon {
             display: inline-block;
             width: 1.25rem;
             height: 1.25rem;
             vertical-align: middle;
         }
         
         .icon-sm {
             width: 1rem;
             height: 1rem;
         }
         
         .icon-lg {
             width: 1.5rem;
             height: 1.5rem;
         }
         
         .icon-xl {
             width: 2rem;
             height: 2rem;
         }
         
         /* 图标颜色变量 */
         .text-current svg {
             color: currentColor;
         }
         
         /* 原有样式 */
        [x-cloak] { display: none !important; }
        .sidebar-transition {
            transition: transform 0.3s ease-in-out;
        }
        
        /* 防止滚动条闪动 */
        html {
            overflow-y: scroll;
            scrollbar-gutter: stable;
        }
        
        body {
            overflow-x: hidden;
            scrollbar-gutter: stable;
        }
        
        /* 主内容区域滚动条优化 */
        main {
            scrollbar-gutter: stable;
        }
        
        /* 自定义滚动条样式 */
        ::-webkit-scrollbar {
            width: 4px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
    </style>
</head>
<body class="bg-gray-50 h-screen overflow-hidden" x-data="appData()" x-cloak>
    <div class="h-full flex">
        <!-- Sidebar -->
        <div :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'" class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg sidebar-transition lg:translate-x-0 lg:static lg:inset-0">
            {{template "sidebar" .}}
        </div>

        <!-- Overlay for mobile -->
        <div x-show="sidebarOpen" 
             @click="sidebarOpen = false"
             class="fixed inset-0 z-40 bg-black bg-opacity-50 lg:hidden"
             x-transition:enter="transition-opacity ease-linear duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition-opacity ease-linear duration-300"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0">
        </div>

        <!-- Main Content -->
        <div class="flex-1 flex flex-col h-full overflow-hidden">
            <!-- Header -->
            {{template "header" .}}

            <!-- Page Content -->
            <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-50">
                <div class="container mx-auto px-6 py-8">
                    {{template "content" .}}
                </div>
            </main>
        </div>
    </div>

    <!-- Toast Notifications -->
    <div x-data="toastData()" 
         x-show="show" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 transform translate-y-2"
         x-transition:enter-end="opacity-100 transform translate-y-0"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100 transform translate-y-0"
         x-transition:leave-end="opacity-0 transform translate-y-2"
         class="fixed top-4 right-4 z-50 max-w-sm">
        <div :class="type === 'success' ? 'bg-green-500' : type === 'error' ? 'bg-red-500' : 'bg-blue-500'" 
             class="text-white px-6 py-4 rounded-lg shadow-lg">
            <div class="flex items-center">
                <i :class="type === 'success' ? 'fas fa-check-circle' : type === 'error' ? 'fas fa-exclamation-circle' : 'fas fa-info-circle'" 
                   class="mr-3"></i>
                <span x-text="message"></span>
                <button @click="hide()" class="ml-4 text-white hover:text-gray-200">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        function appData() {
            return {
                sidebarOpen: false,
                user: null,
                
                init() {
                    this.loadUser();
                    this.checkAuth();
                },
                
                loadUser() {
                    // 使用session认证，直接调用profile接口
                    fetch('/api/v1/auth/profile')
                        .then(response => response.json())
                        .then(data => {
                            if (data.code === 200) {
                                this.user = data.data;
                            }
                        })
                        .catch(error => {
                            console.error('Failed to load user:', error);
                        });
                },
                
                checkAuth() {
                    // 使用session验证接口检查认证状态
                    fetch('/api/v1/auth/verify-session')
                        .then(response => response.json())
                        .then(data => {
                            if (data.code === 200 && data.data.valid) {
                                // 用户已认证，继续正常流程
                                return;
                            } else {
                                // 用户未认证，重定向到登录页
                                window.location.href = '/login';
                            }
                        })
                        .catch(error => {
                            console.error('Auth check failed:', error);
                            // 网络错误时也重定向到登录页
                            window.location.href = '/login';
                        });
                },
                
                logout() {
                    if (confirm('确定要退出登录吗？')) {
                        // 调用后端logout接口
                        fetch('/api/v1/auth/logout', {
                            method: 'POST'
                        })
                        .then(() => {
                            window.location.href = '/login';
                        })
                        .catch(error => {
                            console.error('Logout failed:', error);
                            // 即使logout失败也重定向到登录页
                            window.location.href = '/login';
                        });
                    }
                }
            }
        }
        
        function toastData() {
            return {
                show: false,
                message: '',
                type: 'info',
                
                showToast(message, type = 'info') {
                    this.message = message;
                    this.type = type;
                    this.show = true;
                    
                    setTimeout(() => {
                        this.hide();
                    }, 5000);
                },
                
                hide() {
                    this.show = false;
                }
            }
        }
        
        // Global toast function
        window.showToast = function(message, type = 'info') {
            const toastEl = document.querySelector('[x-data*="toastData"]');
            if (toastEl) {
                Alpine.$data(toastEl).showToast(message, type);
            }
        }
    </script>
</body>
</html>